<template>
    <el-container>
        <el-aside width="200px" class="border-right" style="padding: 10px;border-width: 4px;">
            <el-form ref="form" :model="state.form" :rules="rules" label-position="top">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="state.form.account"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="state.form.password" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="fw" v-if="state.activeKey === '1'"
                        @click="onSyncHandle">数据同步</el-button>
                    <el-button type="primary" class="fw" v-if="state.activeKey === '2'"
                        @click="onUploadHandle">记录上传</el-button>
                </el-form-item>
            </el-form>
        </el-aside>
        <el-main>
            <el-tabs v-model="state.activeKey" tab-position="left" class="full">
                <el-tab-pane name="1" label="产品信息">
                    <el-table :data="state.tableData" style="width: 100%" height="100%">
                        <el-table-column prop="line.name" label="产线">
                            <template #default="scope">
                                {{ scope.row.line.code }} - {{ scope.row.line.name }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="product.name" label="产品">
                            <template #default="scope">
                                {{ scope.row.product.name }} - {{ scope.row.product.code }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="型号">
                            <template #default="scope">
                                {{ scope.row.no }} - {{ scope.row.name }} | {{ scope.row.code }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="index" label="当前流水">
                            <template #default="scope">
                                {{ scope.row.index_date }} / {{ scope.row.index }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane name="2" label="刻录记录">
                    <logs :line="state.lines" :product="state.products" />
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</template>

<script setup>
import { reactive, getCurrentInstance, onMounted } from 'vue';
import logs from '@/views/logs/index.vue';
import md5 from 'js-md5';

import { Login, LoadBasic, LoadLocal, UploadStock } from '#/go/server/Handler';

const { proxy } = getCurrentInstance();

const rules = {
    account: [{ required: true, message: '必填', trigger: 'blur' },],
    password: [{ required: true, message: '必填', trigger: 'blur' },],
}

const state = reactive({
    form: {
        account: 'admin',
        password: 'fmfdkjyc4-',
    },
    activeKey: "1",
    tableData: [],
    lines: [],
    products: [],
});


const onSyncHandle = () => {
    proxy.$refs.form.validate(async valid => {
        if (!valid) return;
        // 开始登录
        let flag = false;
        await Login({ account: state.form.account, password: md5(state.form.password) }).then(res => {
            flag = true;
        }).catch(err => {
            console.log(err)
        })

        if (!flag) {
            proxy.$message.error("登录失败，请检查账号密码");
            return;
        }

        // 加载基础数据
        await LoadBasic().then(res => {
            console.log("基础数据加载成功", res);
            makeTableData(res.line, res.product);
        })
    });
};

const onUploadHandle = () => {
    proxy.$refs.form.validate(async valid => {
        if (!valid) return;
        // 开始登录
        let flag = false;
        await Login({ account: state.form.account, password: md5(state.form.password) }).then(res => {
            flag = true;
        }).catch(err => {
            console.log(err)
        })

        if (!flag) {
            proxy.$message.error("登录失败，请检查账号密码");
            return;
        }

        await UploadStock().then(res => {
            console.log("上传成功", res);
        }).catch(err => {
            console.log("上传失败", err);
        });
    });
};

const makeTableData = (lines, products) => {
    state.lines = (lines || []).map(v => {
        v.product = v.product.split(',').map(p => parseInt(p.trim()));
        return v;
    });
    state.products = products || [];

    let tableData = [];
    state.products.forEach(v => {
        v.model.forEach(model => {
            tableData.push({
                line: state.lines.find(line => line.product.includes(v.id)),
                product: v,
                ...model
            });
        });
    });
    console.log("生成的表格数据", tableData);
    // 返回生成的表格数据
    state.tableData = tableData;
}

const onLoadLocal = () => {
    LoadLocal().then(res => {
        console.log("本地数据加载成功", res);
        makeTableData(res.line, res.product);
    }).catch(err => {
        console.log("本地数据加载失败", err);
    });
}

onMounted(() => {
    // 初始化加载本地数据
    onLoadLocal();
});
</script>